<template>
  <div class="home">
    <el-form :inline="true" label-width="50px">
      <el-form-item label="年份">
        <datePickers placeholder="请选择年份" v-model="form.year" valueFormat="yyyy" />
      </el-form-item>
      <el-form-item label="月份">
        <datePickers placeholder="请选择月份" v-model="form.monthDate" valueFormat="yyyy-MM" />
      </el-form-item>
      <el-form-item label="日期">
        <datePickers placeholder="请选择日期" v-model="form.dayDate" :showPickerOptions="true" :setDefaultValue="true" />
      </el-form-item>
      <el-form-item label="公司">
        <selects placeholder="请选择公司" v-model="form.companyNo" :options="companyOptions" :props="companyOptionsProps"
          @change="selectCompany" />
      </el-form-item>
      <el-form-item label="项目">
        <selects placeholder="请选择项目" v-model="form.projectNo" :options="projectOptions" :props="projectOptionsProps"
          @change="selectProject" />
      </el-form-item>
      <el-form-item label="厂(站)" label-width="60px">
        <selects placeholder="请选择厂(站)" v-model="form.siteNo" :options="siteOptions" :props="siteOptionsProps" />
      </el-form-item>
      <el-form-item label="子系统" label-width="66px">
        <cascaderSelect placeholder="请选择子系统" v-model="form.innerSystem" :cascaderOptions="subSystemOptions"
          :cascaderProps="cascaderProps" />
      </el-form-item>
    </el-form>

    <tables :tableData="tableData" :tableLoading="tableLoading" border :tableColumn="tableColumn"
      @handle-view="handleView" :pageSize.sync="form.pageSize" :pageNum.sync="form.pageNum" :total="total"
      @getList="getList" />

    <el-dialog title="详细情况" :visible.sync="dialogVisible" width="900px">
      <div class="detailInfo">
        <el-row>
          <el-col :span="12">
            <div>公司：{{ currentlyViewData.companyName }}</div>
          </el-col>
          <el-col :span="12">
            <div>使用厂(站)：{{ currentlyViewData.useSiteName }}</div>
          </el-col>
          <el-col :span="12">
            <div>设备名称：{{ currentlyViewData.equipmentName }}</div>
          </el-col>
          <el-col :span="12">
            <div>设备编号：{{ currentlyViewData.serialNum }}</div>
          </el-col>
          <el-col :span="12">
            <div>设备类型：{{ currentlyViewData.equipmentType }}</div>
          </el-col>
          <el-col :span="12">
            <div>是否关重：{{ currentlyViewData.importantStatus == '0' ? '否' : currentlyViewData.importantStatus == '1' ? '是' :
              '未知' }}</div>
          </el-col>
          <el-col :span="12">
            <div>使用状态：{{ currentlyViewData.importantStatus == '0' ? '在用' : currentlyViewData.importantStatus == '1' ? '停用'
              : currentlyViewData.importantStatus == '2' ? '报废' : '未知' }}</div>
          </el-col>
          <el-col :span="12">
            <div>时间：{{ this.handleFormatDate(currentlyViewData.createTime, 'yyyy-MM-dd hh:mm:ss') }}</div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formateTime from "@/mixin/formateDate"
import dataMinxin from "@/mixin/data"
import tables from '@/components/table.vue'
import datePickers from "@/components/datePickers.vue"
import selects from "@/components/selects.vue"
import cascaderSelect from "@/components/cascaderSelect.vue"
export default {
  name: 'HomeView',
  mixins: [formateTime, dataMinxin],
  components: { tables, datePickers, selects, cascaderSelect },
  data() {
    return {
      // 表格渲染数据
      tableColumn: [
        {
          minWidth: '100',
          label: '操作',
          slot: true,
          fixed: 'left',
          actions: [
            {
              label: '查看',
              type: 'primary',
              size: 'mini',
              click: 'handle-view',
            },
            // {
            //   label: '编辑',
            //   type: 'primary',
            //   size: 'mini',
            //   click: 'handle-edit',
            // },
            // {
            //   label: '删除',
            //   type: 'danger',
            //   size: 'mini',
            //   click: 'handle-delete',
            // },
          ],
        },
        {
          label: '序号',
          type: 'index',
          minWidth: '90',
        },
        {
          label: '图片',
          prop: 'url',
          minWidth: '110',
          type: 'el-image',
        },
        {
          label: '公司',
          prop: 'companyName',
          minWidth: '160',
        },
        {
          label: '使用厂(站)',
          prop: 'useSiteName',
          minWidth: '160',
        },
        {
          label: '设备名称',
          prop: 'equipmentName',
          minWidth: '160',
        },
        {
          label: '设备编号',
          prop: 'serialNum',
          minWidth: '140',
        },
        {
          label: '设备类型',
          prop: 'equipmentType',
          minWidth: '120',
        },
        {
          label: '是否关重',
          minWidth: '110',
          prop: 'importantStatus',
          formater: ({ importantStatus }) => {
            return importantStatus == '0' ? '否' : importantStatus == '1' ? '是' : ''
          },
        },
        {
          label: '使用状态',
          minWidth: '110',
          prop: 'useStatus',
          formater: ({ importantStatus }) => {
            return importantStatus == '0' ? '在用' : importantStatus == '1' ? '停用' : importantStatus == '2' ? '报废' : '未知'
          },
        },
        {
          label: '时间',
          minWidth: '160',
          prop: 'createTime',
          formater: ({ createTime }) => {
            return this.handleFormatDate(createTime, 'yyyy-MM-dd hh:mm:ss')
          }
        },
      ],
      // 表格数据
      tableData: [],
      total: 20,
      tableLoading: false,
      // 表单
      form: {
        pageNum: 1,
        pageSize: 10,
      },
      // 当前查看数据
      currentlyViewData: {},
      dialogVisible: false,
      // 公司下拉
      companyOptionsProps: {
        label: 'companyName',
        value: 'companyNo',
      },
      // 项目下拉
      projectOptions: [],
      projectOptionsProps: {
        label: 'projectName',
        value: 'projectNo',
      },
      // 厂(站)下拉
      siteOptions: [],
      siteOptionsProps: {
        label: 'siteName',
        value: 'siteNo',
      },
      // 子系统props
      cascaderProps: { multiple: true, emitPath: false, label: 'quickEntryName', value: 'quickEntryId' },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 选择公司
    async selectCompany(companyNo) {
      if (this.form.projectNo) this.form.projectNo = ''
      if (this.form.siteNo) this.form.siteNo = ''
      this.siteOptions = []
      if (companyNo) {
        this.projectOptions = this.allProjectOptions.filter(item => item.companyNo == companyNo)
      } else {
        this.projectOptions = []
      }
    },
    // 选择项目
    async selectProject(projectNo) {
      if (this.form.siteNo) this.form.siteNo = ''
      if (projectNo) {
        this.siteOptions = this.allSiteOptions.filter(item => item.projectNo == projectNo && item.companyNo == this.form.companyNo)
      } else {
        this.siteOptions = []
      }
    },
    handleView(row) {
      this.currentlyViewData = row
      this.dialogVisible = true
    },
    getList() {
      this.form.pageNum & 2 ? this.tableData = this.tableData2 : this.tableData = this.tableData1
    },
  }
}

</script>
<style scoped lang="scss">
.detailInfo {
  padding: 0 0 0 15px;

  .el-row {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;

    .el-col {
      margin-bottom: 10px;
    }
  }
}

::v-deep .el-dialog__title {
  font-size: 20px;
}

::v-deep .el-dialog__close::before {
  font-size: 22px;
}
</style>
